<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/css/Manageproductlist/productlist.css"/>
    <style>
        .head_box{
            float: left;
            margin-right: 7.5%;
            padding: 20px 0 0 22px;
            width: 216px;
            height: 90px;
            background-color: #FFFFFF;
            border: 1px solid #E4E4E4;
        }

        .div_md{
            margin-left: 19px;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        /*待处理事务开始*/
        #pending_transactions{
            margin-top: 20px;
            min-width:1084px;
            height: 124px;
            margin-bottom: 20px;
            margin-left: 19px;
            border: 1px solid #E4E4E4;
            background-color: #fff;
        }
        #pending_transactions>.top{
            height: 46px;
            line-height: 46px;
            font-size: 20px;
            font-weight: bold;
            padding-left: 20px;
            border-bottom: 1px solid #E4E4E4;
            background-color: #F3F3F3;
        }
        #pending_transactions>.top>p{
            color: #666666;
        }
        #pending_transactions>.bottom{
            width: 220px;
            height: 54px;
            line-height: 58px;
            padding-left: 20px;
            border-bottom: 1px solid #E4E4E4;
        }

        /*运营快捷入口*/
        #operate{
            height: 185px;
            border: 1px solid #E4E4E4;
            background-color: #fff;
        }
        #operate>.top{
            height: 46px;
            line-height: 46px;
            font-size: 20px;
            font-weight: bold;
            padding-left: 20px;
            border-bottom: 1px solid #E4E4E4;
            background-color: #F3F3F3;
        }
        #operate>.top>p{
            color: #666666;
        }
        #operate>.bottom{
            height: 136px;
            text-align:center;
            border-bottom: 1px solid #E4E4E4;
        }
        #operate>.bottom>li{
            float: left;
            width: 135px;
            padding-top: 31.5px;
        }

        /*商品总览*/
        #overview{
            height: 200px;
            margin: 18px 19px;
            background-color: #fff;
        }
        /*左侧*/
        #overview>.fl{
            border: 1px solid #E4E4E4;
        }
        #overview>.fl>.top{
            width: 97%;
            height: 46px;
            line-height: 46px;
            font-weight: bold;
            padding-left: 20px;
            color: #666666;
            border-bottom: 1px solid #E4E4E4;
            background-color: #F3F3F3;

        }
        #overview>.fl>.bottom>.fl{
            width: 225px;
            height: 154px;
            text-align:center;
        }
        #overview>.fl>.bottom .red{
            margin-top: 40px;
            font-size: 30px;
            color: #F04844;
        }
        #overview>.fl>.bottom p{
            line-height: 30px;
        }
        #overview>.fl>.bottom>.fr{
            width: 224px;
            height: 154px;
            text-align:center;
        }
        /*右侧*/
        #overview>.fr{
            border: 1px solid #E4E4E4;
        }
        #overview>.fr>.top{
            width: 97%;
            height: 46px;
            line-height: 46px;
            font-weight: bold;
            padding-left: 20px;
            color: #666666;
            border-bottom: 1px solid #E4E4E4;
            background-color: #F3F3F3;

        }
        #overview>.fr>.bottom>.fl{
            width: 112px;
            height: 154px;
            text-align:center;
        }
        #overview>.fr>.bottom .red{
            margin-top: 40px;
            font-size: 30px;
            color: #F04844;
        }
        #overview>.fr>.bottom p{
            line-height: 30px;
        }
        #overview>.fr>.bottom>.fr{
            width: 112px;
            height: 154px;
            text-align:center;
        }
        #course{
            height: 430px;
            border: 1px solid #E4E4E4;
            background-color: #fff;
        }
        #course>.top{
            height: 46px;
            line-height: 46px;
            font-size: 20px;
            font-weight: bold;
            padding-left: 20px;
            border-bottom: 1px solid #E4E4E4;
            background-color: #F3F3F3;

        }
        #course>.middle{
            overflow: hidden;
            margin: 20px 0px;
        }
        #course>.middle>p{
            font-size: 16px;
            color: #666;
        }
        #course>.middle>.week{
            margin: 0px  40px;
        }
        #course>.middle>.today{
            margin-left: 806px;
        }
        #course>.bottom>.fl{
            width: 204px;
            height: 250px;
            margin-top: 20px;
            padding: 22px 44px 0;
            border-right: 1px solid #E4E4E4;
        }
        #linear {
            width: 936px;
            height: 320px;
        }
        .layui-col-md10{
            min-width: 1245px;
            width: 95.333333%;
        }
        .layui-col-md5{
            width: 49.666667%;
        }
    </style>
</head>
<body>
    <div class="layui-row">
        <div class="layui-col-md10">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backColor">
                    系统首页
                    <div class="btnRight" style="margin-bottom: 10px">
                        <button onclick="refresh()" type="button" class="layui-btn layui-btn layui-btn-sm">
                            <i class="layui-icon layui-icon-refresh-1"></i>
                            刷新
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md10 div_md">
            <div class="head_box">
                    <span class="fl">
                        <i class="layui-icon layui-icon-camera" style="font-size: 50px; color: #0DAB9D;"></i>
                    </span>
                <span class="fl">
                        <p>上传视频总数</p>
                        <span>200</span>
                </span>
            </div>
            <div class="head_box">
                    <span class="fl">
                        <i class="layui-icon layui-icon-read" style="font-size: 50px; color: #0DAB9D;"></i>
                    </span>
                <span class="fl">
                        <p>上传的视频浏览数</p>
                        <span>200</span>
                    </span>
            </div>
            <div class="head_box">
                    <span class="fl">
                        <i class="layui-icon layui-icon-star" style="font-size: 50px; color: #0DAB9D;"></i>
                    </span>
                <span class="fl">
                        <p>收藏数</p>
                        <span>200</span>
                    </span>
            </div>
            <div class="head_box" style="margin: 0;">
                    <span class="fl">
                        <i class="layui-icon layui-icon-praise" style="font-size: 50px; color: #0DAB9D;"></i>
                    </span>
                <span class="fl">
                        <p>点赞数</p>
                        <span>200</span>
                    </span>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs9 layui-col-sm9 layui-col-md10"  id="pending_transactions">
            <div class="top">
                <p>待处理事务</p>
            </div>
            <div class="bottom">
                <div>
                    <p class="fl">商品带审核信息</p>
                    <p class="fl" style="margin-left: 20px;">(<span style="color: #F04844;">10</span>)</p>
                </div>
            </div>
        </div>
    </div>
    <!--运营快捷入口-->
    <div class="layui-row">
        <div class="layui-col-xs9 layui-col-sm9 layui-col-md10 div_md"  id="operate" >
            <div class="top">
                <p>运营快捷入口</p>
            </div>
            <ul class="bottom">
                <li>
                    <div>
                        <i class="layui-icon layui-icon-set-fill" style="font-size: 60px; color: #0DAB9D;"></i>
                        <p>账户设置</p>
                    </div>
                </li>
                <li>
                    <div>
                        <i class="layui-icon layui-icon-dialogue" style="font-size: 60px; color: #0DAB9D;"></i>
                        <p>微圈评论</p>
                    </div>
                </li>
                <li>
                    <div>
                        <i class="layui-icon layui-icon-reply-fill" style="font-size: 60px; color: #0DAB9D;"></i>
                        <p>课程评论</p>
                    </div>
                </li>
                <li>
                    <div>
                        <i class="layui-icon layui-icon-template-1" style="font-size: 60px; color: #0DAB9D;"></i>
                        <p>课程列表</p>
                    </div>
                </li>
                <li>
                    <div>
                        <i class="layui-icon layui-icon-read" style="font-size: 60px; color: #0DAB9D;"></i>
                        <p>微圈列表</p>
                    </div>
                </li>
                <li>
                    <div>
                        <i class="layui-icon layui-icon-search" style="font-size: 60px; color: #0DAB9D;"></i>
                        <p>课程审核</p>
                    </div>
                </li>
                <li>
                    <div>
                        <i class="layui-icon layui-icon-search" style="font-size: 60px; color: #0DAB9D;"></i>
                        <p>微圈审核</p>
                    </div>
                </li>
                <li>
                    <div>
                        <i class="layui-icon layui-icon-survey" style="font-size: 60px; color: #0DAB9D;"></i>
                        <p>审核日志</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--商品总览-->
    <div class="layui-row">
        <div class="layui-col-xs9 layui-col-sm9 layui-col-md10 div_md"  id="overview">
            <div class="fl layui-col-md5">
                <div class="top">商品总览</div>
                <div class="bottom">
                    <div class="fl">
                        <p class="red">100</p>
                        <p>课程数量&nbsp;&nbsp;(已上架)</p>
                    </div>
                    <div class="fr">
                        <p class="red">400</p>
                        <p>商品数量&nbsp;&nbsp;(已上架)</p>
                    </div>
                </div>
            </div>
            <div class="fr layui-col-md5">
                <div class="top">用户总览</div>
                <div class="bottom">
                    <div class="fl">
                        <p class="red">100</p>
                        <p>今日新增</p>
                    </div>
                    <div class="fl">
                        <p class="red">200</p>
                        <p>昨日新增</p>
                    </div>
                    <div class="fr">
                        <p class="red">1000</p>
                        <p>本月新增</p>
                    </div>
                    <div class="fr">
                        <p class="red">5000 </p>
                        <p>全部用户</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--课程统计-->
    <div class="layui-row">
        <div class="layui-col-xs9 layui-col-sm9 layui-col-md10 div_md" id="course">
            <div class="top">
                <p>课程统计</p>
            </div>
            <div class="middle">
                <p class="today fl">今天</p>
                <p class="week fl">本周</p>
                <p class="month fl">本月</p>
            </div>
            <div class="bottom">
                <div class="fl">
                    <div>
                        <p>本月新增课程总数</p>
                        <p style="font-size: 30px; color: #666666">0</p>
                        <span class="fl" style="color: #00A950;">-0.45%</span>
                        <p class="fr" style="color: #666;">同比上月</p>
                    </div>
                    <div style="margin-top: 30px">
                        <p>本周申请成功</p>
                        <p style="font-size: 30px; color: #666666">0</p>
                        <span class="fl" style="color: #F04844;">-0.45%</span>
                        <p class="fr" style="color: #666;">同比上月</p>
                    </div>
                </div>
                <div class="fr" id="linear"></div>
            </div>
        </div>
    </div>
</body>
<script src="/echarts/echarts.js"></script>
<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('linear'));

    // 指定图表的配置项和数据
    var option = {
        tooltip: {},
        legend: {
            data: ['课程量'],
            bottom: 10
        },
        xAxis: {
            data: ['03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00']
        },
        yAxis: {},
        series: [
            {
                name: '课程量',
                type: 'line',
                data: [5, 20, 36, 10, 10, 20, 15],
                // 点的颜色。
                itemStyle: {color: 'red'},
            }
        ]
    };
    console.log(option)
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</html>